<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="image/favicon.ico" sizes="16x16">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <title>Home</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=6ac3b45da21b3cb4fe88b65611417c59&plugin=AMap.Geocoder"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/home.js"></script>
</head>

<body id="body" class="homes home-swiper">
<input id="color-mode-on" name="color-mode" type="radio"/>
<input id="color-mode-off" name="color-mode" type="radio" checked/>

<div class="page">
    <div class="mask" id="mask">
        <div class="footer-info mask-main">
            <div class="mask-close"  id="mask-off">
                <span class="iconfont icon-close"></span>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="page/gallery/gallery.html">GALLERY</a>
                <a class="footer-nav-text" href="page/gallery/gallery.html">Amoy</a>
                <a class="footer-nav-text" href="page/gallery/gallery-1.html">The bank of Laodao river</a>
                <a class="footer-nav-text" href="page/gallery/gallery-2.html">UK</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="page/collection/collection.html">COLLECTION</a>
                <a class="footer-nav-text" href="page/collection/collection.html">B&W</a>
                <a class="footer-nav-text" href="page/collection/collection-1.html">Architecture</a>
            </div>
            <div class="footer-group">
                <a class="footer-nav-title" href="page/introduction/introduction.html">ABOUT YUK1</a>
            </div>
        </div>
    </div>
    <header>
        <div class="shortcut-bar long-nav">
            <div class="shortcut-btn">
                <div id="logged-in-content" class="logged-content">
                    <div class="username">
                        <img src="image/logo/logo.png" id="user-icon" class="user-icon nav-icon-short" alt=""/>
                        <div id="username"></div> 
                        <div class="split-line"></div>
                        <div id="city"></div>
                    </div>
                    <div  class="user-icon"><span id="weather"></span></div>
                </div>
                <div id="logged-out-content">
                    <a href="page/login/login.html" class="user-icon">
                        <span class="iconfont icon-wode"></span>
                    </a>
                </div>
                <div class="language">ENGLISH</div>
                <div>
                    <label class="color-mode-btn color-mode-on-btn" for="color-mode-on">Color-Aware<span class="iconfont icon-on"></span></label>
                    <label class="color-mode-btn color-mode-off-btn" for="color-mode-off">Color-Aware <span class="iconfont icon-off"></span></label>
                </div>
            </div>
        </div>
        <div class="nav-bar long-nav">
            <div class="nav-container">
                <div class="nav-menu">
                    <a href="#"><img src="image/logo/logo.jpg" class="nav-icon" alt=""/></a>
                    <a href="page/gallery/gallery.html" class="nav-bar-item">GALLERY</a>
                    <a href="page/collection/collection.html" class="nav-bar-item">COLLECTION</a>
                </div>
                <div class="nav-side-menu" id="mask-on">
                    <span class="iconfont icon-xiaojianju"></span>
                </div>
            </div>
        </div>
    </header>
    <!-- 页眉 导航栏 -->
    <!--主容器-->
    <div class="index-main">
        <div class="container">

            <!--控制转到第几张按钮-->
            <input id="btn1" name="dir" type="radio" checked/>
            <input id="btn2" name="dir" type="radio"/>
            <input id="btn3" name="dir" type="radio"/>
            <input id="btn4" name="dir" type="radio"/>
            <input id="btn5" name="dir" type="radio"/>

            <!--控制往左边轮播-->
            <input id="left_btn1" class="dir_btn" name="dir" type="radio"/>
            <input id="left_btn2" class="dir_btn" name="dir" type="radio"/>
            <input id="left_btn3" class="dir_btn" name="dir" type="radio"/>
            <input id="left_btn4" class="dir_btn" name="dir" type="radio"/>
            <input id="left_btn5" class="dir_btn" name="dir" type="radio"/>

            <!--控制往右边轮播-->
            <input id="right_btn1" class="dir_btn" name="dir" type="radio"/>
            <input id="right_btn2" class="dir_btn" name="dir" type="radio"/>
            <input id="right_btn3" class="dir_btn" name="dir" type="radio"/>
            <input id="right_btn4" class="dir_btn" name="dir" type="radio"/>
            <input id="right_btn5" class="dir_btn" name="dir" type="radio"/>

            <!--存放图片-->
            <div class="pic">

                <!--给所有图片套一个盒子 通过左边距进行轮播-->
                <div class="box">
                    <img src="image/INDEX/INDEX_top_1.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_2.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_3.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_4.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_5.jpg" alt="">
                </div>

                <!--给图片前面加一层图片层 用于实现无缝轮播-->
                <div class="before_box">
                    <img src="image/INDEX/INDEX_top_5.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_1.jpg" alt="">
                </div>

                <!--给图片后面加一层图片层 用于实现无缝轮播-->
                <div class="after_box">
                    <img src="image/INDEX/INDEX_top_5.jpg" alt="">
                    <img src="image/INDEX/INDEX_top_1.jpg" alt="">
                </div>
            </div>

            <!--左边的按钮 每次点击都会根据当前是第几张决定显示的按钮-->
            <div class="left_box dir_box">
                <label class="left_btn_1 btn_btn_1" for="left_btn1"></label>
                <label class="left_btn_2 btn_btn_2" for="left_btn2"></label>
                <label class="left_btn_3 btn_btn_3" for="left_btn3"></label>
                <label class="left_btn_4 btn_btn_4" for="left_btn4"></label>
                <label class="left_btn_5 btn_btn_5" for="left_btn5"></label>
            </div>

            <!--右边的按钮 每次点击都会根据当前是第几张决定显示的按钮-->
            <div class="right_box dir_box">
                <label class="right_btn_1 btn_btn_1" for="right_btn1"></label>
                <label class="right_btn_2 btn_btn_2" for="right_btn2"></label>
                <label class="right_btn_3 btn_btn_3" for="right_btn3"></label>
                <label class="right_btn_4 btn_btn_4" for="right_btn4"></label>
                <label class="right_btn_5 btn_btn_5" for="right_btn5"></label>
            </div>

            <!--下方按钮 点击各个按钮 决定跳转到第几张-->
            <div class="count">
                <ul>
                    <li class="current">
                        <label class="btn_1" for="btn1"></label>
                    </li>
                    <li>
                        <label class="btn_2" for="btn2"></label>
                    </li>
                    <li>
                        <label class="btn_3" for="btn3"></label>
                    </li>
                    <li>
                        <label class="btn_4" for="btn4"></label>
                    </li>
                    <li>
                        <label class="btn_5" for="btn5"></label>
                    </li>
                </ul>
            </div>

        </div>
        <div class="center-main">
            <div class="page-intro" id="intro">It is like they say in Dead Poets Society, medicine, law, business, engineering,
                these
                are noble pursuits and necessary to sustain life. But poetry, beauty, romance, love, these are what we
                stay alive for.
            </div>
            <div class="img-group-1" id="img-group-1">
                <div class="group1-title" id="title-1"><h1>FEATURED PRINTS</h1></div>
                <div class="group-img-1">
                    <div class="group1-img"><img loading="lazy" src="image/INDEX/INDEX_featured pic_1.jpg" alt=""/>
                    </div>
                    <div class="group1-img"><img loading="lazy" src="image/INDEX/INDEX_featured pic_2.JPG" alt=""/>
                    </div>
                    <div class="group1-img"><img loading="lazy" src="image/INDEX/INDEX_featured pic_3.JPG" alt=""/>
                    </div>
                    <div class="group1-img"><img loading="lazy" src="image/INDEX/INDEX_featured pic_4.JPG" alt=""/>
                    </div>
                </div>
            </div>
            <div class="img-group-2" id="img-group-2">
                <div class="group2-box" id="group2-title">
                    <div class="group2-title">Sky</div>
                    <div>Blue sky is perfect for anything, from moon, planes to flags</div>
                </div>
                <div class="group2-imgs" id="group2-imgs">
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_first%20middle%20frame%20_1.jpg"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_first%20middle%20frame%20_2.jpg"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_first%20middle%20frame%20_3.jpg"
                                                     alt=""/></div>
                </div>
            </div>
            <div class="img-group-2" id="img-group-3">
                <div class="group2-box" id="group3-title">
                    <div class="group2-title">Flowers</div>
                    <div>No matter where you are, there is always a bunch of flowers blooming for you.</div>
                </div>
                <div class="group2-imgs" id="group3-imgs">
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_second%20middle%20frame _1.jpg"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_second%20middle%20frame%20_2.jpg"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_second%20middle%20frame%20_3.jpg"
                                                     alt=""/></div>
                </div>
            </div>
            <div class="img-group-2" id="img-group-4">
                <div class="group2-box" id="group4-title">
                    <div class="group2-title">leisurely and comfortable</div>
                    <div>On a warm winter afternoon, books, tea, pet, which is a leisurely life or both of them.</div>
                </div>
                <div class="group2-imgs" id="group4-imgs"> 
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_third%20middle%20frame%20_1.JPG"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_third%20middle%20frame%20_2.jpg"
                                                     alt=""/></div>
                    <div class="group2-img-box"><img class="group2-img" loading="lazy"
                                                     src="image/INDEX/INDEX_third%20middle%20frame%20_3.jpg"
                                                     alt=""/></div>
                </div>
            </div>
        </div>
        <div class="footer-nav">
            <div class="footer-info">
                <div class="footer-group">
                    <a class="footer-nav-title" href="page/gallery/gallery.html">GALLERY</a>
                    <a class="footer-nav-text" href="page/gallery/gallery.html">Amoy</a>
                    <a class="footer-nav-text" href="page/gallery/gallery-1.html">The bank of Laodao river</a>
                    <a class="footer-nav-text" href="page/gallery/gallery-2.html">UK</a>
                </div>
                <div class="footer-group">
                    <a class="footer-nav-title" href="page/collection/collection.html">COLLECTION</a>
                    <a class="footer-nav-text" href="page/collection/collection.html">B&W</a>
                    <a class="footer-nav-text" href="page/collection/collection-1.html">Architecture</a>
                </div>
                <div class="footer-group">
                    <a class="footer-nav-title" href="page/introduction/introduction.html">ABOUT YUK1</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-info-2">
        <div class="logo-2"></div>
        <div class="footer-text"><a href="page/introduction/introduction.html">@2023 YUK1</a></div>
    </div>
</div>
</body>
</html>
